<template>
  <div>
    <el-table
    :data="tableData"
    style="width: 100%"
    max-height="680px"
    >
    <el-table-column
      fixed
      prop="lid"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="food"
      label="名称"
      width="180">
    </el-table-column>
     <el-table-column
      label="图片">
      <template slot-scope="scope">
       <img :src="scope.row.pic" style="width:50px;height:50px;">
      </template>
    </el-table-column>
     <el-table-column
      prop="collect"
      label="收藏量"
      width="150">
    </el-table-column>
    <el-table-column
    prop="views"
      label="浏览量"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <!-- 新增按钮 -->
        <el-button
        @click="addDialog"
        type="warning" icon="el-icon-circle-plus-outline" circle></el-button>
        <!-- 修改按钮 -->
        <el-button
        @click="showEditDialog(scope.row.lid)"
        type="primary" icon="el-icon-edit" circle></el-button>
        <!-- 删除按钮 -->
        <el-button 
        @click="deleteRow(scope.row.lid)" 
        type="danger" 
        icon="el-icon-delete" circle></el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
     <!-- <el-pagination
      @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
           :page-size="pagesize"
            :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
    </el-pagination> -->
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" 
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>



    <!-- 修改商品的对话框 -->
  <el-dialog  title="编辑商品信息" :visible.sync="editDialogVisible" width="80%"
@close="editDialogClosed">
          <el-form 
    ref="editFormRef"
    style="width:500px"
    :model="editForm" 
    label-width="100px">
      <el-form-item label="商品名称" prop="food">
        <el-input v-model="editForm.food" />
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-input v-model="editForm.pic" />
      </el-form-item>
       <el-form-item label="收藏量" prop="collect">
        <el-input v-model="editForm.collect" />
      </el-form-item>
       <el-form-item label="浏览量" prop="views">
        <el-input v-model="editForm.views" />
      </el-form-item>

</el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </span>
        </el-dialog>



          <!--新增商品的对话框 -->
  <el-dialog  title="新增商品信息" :visible.sync="addDialogVisible" width="80%"
@close="addDialogClosed">
          <el-form 
    ref="addFormRef"
    style="width:500px"
    :model="addForm" 
    label-width="100px">
      <el-form-item label="商品名称" prop="food">
        <el-input v-model="addForm.food" />
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-input v-model="addForm.pic" />
      </el-form-item>
       <el-form-item label="收藏量" prop="collect">
        <el-input v-model="addForm.collect" />
      </el-form-item>
       <el-form-item label="浏览量" prop="views">
        <el-input v-model="addForm.views" />
      </el-form-item>

</el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addList">确 定</el-button>
          </span>
        </el-dialog>




  </div>
</template>

<script>
  export default {
    
     data() {
        return {
          value: true,
      queryInfo: {
        query: "",
        pagenum: 1, //当前的页数
        pagesize: 2, //每页的数量
      },
      tableData : [],
      total: 0,
           editDialogVisible:false,
           addDialogVisible:false,
          // 查询到的列表信息
          editForm:{},
          addForm:{
            food:'',
            pic:'',
            collect:'',
            views:'',
          }
        }
    },
    mounted() {
     this.getTotal()
    this.getTableData();
   },
  
    methods: {
     async getTotal(){
        const { data: res } = await this.$http.get("/list");
      console.log(res.result);
      this.total=res.result.length
      },
    // getTotal(){
    //   this.$http.get('/list').then((res)=>{
    //     console.log(res,'222');
    //   })
    // },
     async getTableData() {
      const { data: res } = await this.$http.get("/list/page", {
        params: this.queryInfo,
      });
      if(res.code!=200){
          return this.$message.error("获取用户列表失败！");
      }
      console.log(res);
      this.tableData = res.data;
  
      
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize){
        console.log(newSize+'size');
        this.queryInfo.pagesize = newSize;//重新指定每页数据量
        this.getTableData() ;//带着新的分页请求获取数据
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage){
        console.log(newPage+'page');
        this.queryInfo.pagenum = newPage;//重新指定当前页
        this.getTableData() ;//带着新的分页请求获取数据
    },
  



     // 展示编辑列表的对话框
       async showEditDialog(id) {
        console.log("id:"+id);
         const {data:res}=await this.$http.get(`/list/self?lid=${id}`)
         console.log("res:",res);
        if(res.code!==200){
          return this.$message.error('查询用户信息失败')
        }
        this.editForm=res.result[0]
        console.log(this.editForm);
        console.log("lid:"+this.editForm.lid);
        this.editDialogVisible=true
      },
     
       // 监听修改用户对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields
      },
      
      // 修改用户信息并提交
      editUserInfo(){
        console.log(this.editForm,'12312312');
        this.$refs.editFormRef.validate(async valid=>{
          if(!valid) return
        
          const {data: res} = await this.$http.put('/list/edit', {
            lid:this.editForm.lid,
            food: this.editForm.food,
            pic: this.editForm.pic,
            collect:this.editForm.collect,
            views:this.editForm.views

          })
          console.log(res,'123123');
          // 怎么判断?///////////////////////////////////////////////
          if(res.code!==200){
            return this.$message.error('修改失败!')
          }
          // 关闭对话框
          this.editDialogVisible=false
          // 刷新数据列表
          this.getTabelData()
          // 提示修改成功
          this.$message.success('更新用户信息成功!')
        })
      },
      // 新增商品
       // 展示新增用户的对话框
       async addDialog() {
        this.addDialogVisible=true
      },
      // 监听新增用户对话框的关闭事件
      addDialogClosed(){
        this.$refs.addFormRef.resetFields
      },
      // 点击按钮,添加用户
      addList(){ 
        this.$refs.addFormRef.validate(async valid=>{
          console.log(valid);
          if(!valid) return
          const {data : res}=await this.$http.post('/list/add',this.addForm)
          if(res.code!=200){
            return this.$message.error('添加失败!')
          }
          this.$message.success('添加成功!')
          this.addDialogVisible=false
          this.getTabelData()
        })
      },
 
        deleteRow(id) {
          console.log('正在删除:'+id);
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {//点击确定时执行
             this.$http.delete(`/user/del?uid=${id}`).then(res=>{
                console.log(res);
              })
              this.tableData.splice(id,1)
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getTabelData()
            }).catch(() => {//点击取消按钮,执行
              this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          }); 
        },  

    }


  }



  
</script>

<style lang="scss" scoped>
 .page {
            width: 640px;
            text-align: center;
            background-color: #fff;
            span {
                font-size: 10px;
                font-weight: normal;
                color: #444;
                padding: 5px;
                margin: 0 5px;
                background-color: #eee;
                border: 1px solid #ddd;
                cursor: pointer;
            }
            .num {
                background-color: #fff;
            }
            .choosed {
                background-color: rgb(218, 70, 33);
                color: #fff;
            }
        }

</style>